<template>
  <div class='container'>

    <el-card>
      <el-row type="flex" justify="end">
    <el-button  type="success" size="small" icon="el-icon-edit" style="margin-bottom: 10px;" @click="$router.push('/questions/new')">新增试题</el-button>
        </el-row>
    
    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="auto" ref="from">
      <el-row  type="flex" class="row-bg" justify="space-between">
      <div style="width:320px">
        <el-form-item label="学科">
    <el-select v-model="formInline.subjectID" placeholder="请选择" size="small" style="width: 240px;" @change="directory(formInline.region1),tag(formInline.region1)">
      <el-option :label="item.label" :value="item.value" v-for="item in list" :key="item.value"></el-option>
    </el-select>
  </el-form-item>
      </div>
      
  <div style="width:320px">
    <el-form-item label="二级目录">
    <el-select v-model="formInline.catalogID" placeholder="请选择" size="small" style="width: 240px;">
      <el-option :label="item.label" :value="item.value" v-for="item in directoryList"></el-option>
      
    </el-select>
  </el-form-item>
  </div>
  
  <div style="width:320px">
    <el-form-item label="标签">
    <el-select v-model="formInline.tags" placeholder="请选择" size="small" style="width: 240px;">
      <el-option :label="item.label" :value="item.value" v-for="item in tagList"></el-option>
      
    </el-select>
  </el-form-item>
  </div>
  
  <div style="width:320px">
    <el-form-item label="关键字">
    <el-input v-model="formInline.keyword" placeholder="根据题干搜索" size="small" style="width: 240px;" @change="users()"></el-input>
  </el-form-item>
  </div>
  
  </el-row>
  <el-row  type="flex" class="row-bg" justify="space-between">
    <div style="width:320px">
      <el-form-item label="试题类型">
    <el-select v-model="formInline.questionType" placeholder="请选择" size="small" style="width: 240px;">
      <el-option :label="item.label" :value="item.value" v-for="item in testList"></el-option>
      
    </el-select>
  </el-form-item>
    </div>
    
  <div style="width:320px">
    <el-form-item label="难度">
    <el-select v-model="formInline.difficulty" placeholder="请选择" size="small" style="width: 240px;">
      <el-option :label="item.label" :value="item.value" v-for="item in difficultyList"></el-option>
    </el-select>
  </el-form-item>
    </div>
  
  <div style="width:320px">
    <el-form-item label="方向">
    <el-select v-model="formInline.direction" placeholder="请选择" size="small" style="width: 240px;">
      
      <el-option :label="item" :value="index"  v-for="(item,index) in directionList"></el-option>
    </el-select>
  </el-form-item>
    </div>
  
  <div style="width:320px">
    <el-form-item label="录入人">
    <el-select v-model="formInline.creatorID" placeholder="请选择" size="small" style="width: 240px;">
      <el-option :label="item.username" :value="item.id" v-for="item in userList"></el-option>
    </el-select>
  </el-form-item>
    </div>
  
</el-row>
<el-row  type="flex" class="row-bg" justify="space-between">
  <div style="width:320px">
    <el-form-item label="题目备注">
    <el-input v-model="formInline.remarks"  size="small" style="width: 240px;"></el-input>
  </el-form-item>
  </div>
  
  <div style="width:320px">
    <el-form-item label="企业简称">
    <el-input v-model="formInline.shortName"  size="small" style="width: 240px;"></el-input>
  </el-form-item>
  </div>
  
  <div style="width:320px">
    <el-form-item label="城市">
    <el-select v-model="formInline.province" placeholder="请选择" size="small" style="width: 120px;"  @change="citys">
      <el-option :label="item" :value="item"  v-for="(item,index) in cityList"></el-option>
    </el-select>
    <el-select v-model="formInline.city" placeholder="请选择" size="small" style="width: 120px;">
      <el-option :label="item" :value="index"  v-for="(item,index) in areaList"></el-option>
    </el-select>
  </el-form-item>
  </div>
  
  <div style="width:320px; " >
    <el-form-item style="margin-left: 100px; float:right;">
    <el-button  size="small"  @click="onSubmit" >清除</el-button>
    <el-button  size="small" type="primary" @click="search">搜索</el-button>
  </el-form-item>
  </div>
</el-row>
</el-form>
    </el-card>
  
    <el-tabs type="border-card" v-model="activeName"  @tab-click="listPage" >
  <el-tab-pane label="全部" >  <el-alert
    
    :title='`数据一共${changdu}条`'
    type="info"
    show-icon>
   
  </el-alert>
</el-tab-pane>
  <el-tab-pane label="待审核">  <el-alert
    
    :title='`数据一共${changdu}条`'
    type="info"
    show-icon>
  </el-alert>
</el-tab-pane>
  <el-tab-pane label="已审核"   >  <el-alert
  
    :title='`数据一共${changdu}条`'
    type="info"
    show-icon>
  </el-alert>
</el-tab-pane>
  <el-tab-pane label="已拒绝">  <el-alert
    :title='`数据一共${changdu}条`'
    type="info"
    show-icon>
  </el-alert>
</el-tab-pane>
</el-tabs>
<!-- //数据 -->
<el-table
    :data="subjects"
    border
    style="width: 100%">
    <el-table-column
      prop="number"
      label="试题编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科"
      width="120">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
      width="120">
    </el-table-column>
    <el-table-column
      
      label="题型"
      width="120">
      <template slot-scope="scope">
    {{ scope.row.questionType === '1' ? '单选' : '多选' }}
    </template>
    </el-table-column>
    <el-table-column
      prop="question"
      label="题干"
      width="300">
    </el-table-column>
    <el-table-column
    
      label="录入时间"
      width="120">
      <template slot-scope="scope">
    {{ scope.row.addDate | parseTimeByString }}
    </template>
    </el-table-column>
    <el-table-column
      
      label="难度"
      width="120">
      <template slot-scope="scope">
    {{ scope.row.difficulty === '1' ? '简单': scope.row.difficulty === '2'? '一般' : '困难'  }}
    </template>
    </el-table-column>
    <el-table-column
      prop="creator"
      label="录入人"
      width="120">
    </el-table-column>
    <el-table-column
    
      label="审核状态"
      width="120">
      <template slot-scope="scope">
    {{ scope.row.chkState === 1 ? '待审核': '已审核'  }}
    </template>
    </el-table-column>
    <el-table-column
      prop="chkRemarks"
      label="审核意见"
      width="120">
    </el-table-column>
    <el-table-column
      prop="chkUser"
      label="审核人"
      width="120">
    </el-table-column>
    <el-table-column
      prop="publishState"
      label="发布状态"
      width="120">
      <template slot-scope="scope">
    {{ scope.row.publishState === 1 ? '待发布': '已下架'  }}
    </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">预览</el-button>
        <el-button type="text" size="small">审核</el-button>
        <el-button type="text" size="small" v-if="scope.row.publishState===1" @click="Shelves(scope.row)">上架</el-button>
        <el-button type="text" size="small" v-else @click="Shelves(scope.row)">下架</el-button>
        <el-button type="text" size="small" @click="open(scope.row)" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- //分页 -->
  <el-pagination class="block"
    layout="prev, pager, next, sizes, jumper"
    :total="total"
    :page-size="reqParams.pageSize"
    :current-page="reqParams.page"
    @current-change="changePager"
    :page-sizes="[5,10,20,50]"
    @size-change="changeSize"
    >
   
  </el-pagination>
  </div>
  
</template>

<script>
import {choice , choicePublish, remove,list } from '@/api/hmmm/questions.js'
import {simple} from '../../api/hmmm/subjects'
import {simple as directory} from '../../api/hmmm/directorys'
import {simple as tag} from '../../api/hmmm/tags'
import {simple as users} from '../../api/base/users'
import {provinces,citys} from '../../api/hmmm/citys'
import {difficulty,questionType,direction} from '../../api/hmmm/constants'

export default {
  
name:'questions',
    data() {
      return {
        formInline: {
          user: '',
          region: ''
        },
        list: [], //学科列表
        directoryList: [], //目录列表
        tagList: [], //标签列表
        testList: questionType, //试题
        difficultyList: difficulty, //难度
        directionList: direction, //方向
        userList: [], //题目作者
        cityList: [], //城市
        areaList: [], //地区
        subjects: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        ],
        //分类
        activeName: '0'  ,
        reqParams:{
          page:1,
          pagesize:10,
          chkState: null
        },
        total:0,
        changdu:0,
      }
    },
    created(){
      this.handleClick(),
      this.simple()
      this.provinces()
    },
    methods: {
      onSubmit() {
       this.formInline = {}
       this.$refs.from.resetFields()
      },
     async search(){
       const res = await list({...this.formInline,page: 1,pagesize: 5})
      //  console.log(res);
       this.listData = res.data.items
      },

      async simple() {
        try{
          const res = await simple()
          this.list = res.data
          // console.log(res);
        }catch(err) {
          console.log(err);
        }
      },

      async directory(id) {
        try{
          const res = await directory({subjectID: id})
          this.directoryList = res.data
          // console.log(res);
        }catch(err) {
          console.log(err);
        }
      },

      async tag(id) {
        try{
          const res = await tag({subjectID: id})
          this.tagList = res.data
          // console.log(res);
        }catch(err) {
          console.log(err);
        }
      },
      async users() {
        try{
          const res = await users({keyword: this.formInline.user})
          // console.log(res);
          this.userList = res.data
        }catch(err) {
          console.log(err);
        }
      },
      provinces() {
       this.cityList =  provinces()
      },
      citys(value){
        // console.log(value);
        
       this.areaList = citys(value)
      },
      
      //获取列表
      async handleClick() {
       try {
        const data = await choice(this.reqParams)
        console.log('lll',data);
        this.subjects= data.data.items
        console.log(this.subjects);
        this.total=data.data.counts
        this.changdu=data.data.counts
      
        
       } catch (error) {
        console.log(error);
       }
      },
      //页面分类
      listPage(tab,event){
       
        if (tab.index == 1) {
          console.log(this.reqParams.chkState);
          this.reqParams.chkState = 1   
          this.handleClick()  
          return
      } else if (tab.index == 2) {
        this.reqParams.chkState = 2
          this.handleClick()
          return
      } else {
        this.reqParams.chkState = null
          this.handleClick()
          return
      }
        this.handleClick()
        return
      },
      //分页
      changePager (newPage){
        console.log(newPage);
        this.reqParams.page= newPage
        this.handleClick()
      },
      //该每页条数
      changeSize (newSize){
       
        this.reqParams.page=1
        this.reqParams.pagesize= newSize
        this.handleClick()
      }, 
      //上架
      Shelves(data) {
        this.$confirm('你确定要上架此题目吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          console.log('kkkkkk',data);
          data.publishState === 1 ? data.publishState =0 : data.publishState =1
          console.log('kkkkkk',data);
          await this.choicePublish(data)

          this.handleClick() 
          this.$message({
            type: 'success',

            message: '上架成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消上架'
          });          
        });
      },
      //删除
      open(data) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await remove(data)
          this.handleClick() 
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
    

  
}
</script>

<style scoped lang='scss'>
.block{
  margin-top: 15px;
  float: right;
}</style>
